import React, { useState, useEffect } from 'react'
import './index.less'
import NavBar from '../../components/Navbar'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { deleteBank, getBankList, selectBank } from '../../api/union'
import { Modal, Toast } from 'antd-mobile'
import AmeModal from '../../components/AmeModal'
import appSdk from '../../utils/app_sdk'

function BankManagement() {
  const navigate = useNavigate()
  const params = useSearchParams()[0] // 1:银行卡  2：支付宝 | user_type 1: 个人（只能一张卡）
  const [isManage, setIsManage] = useState(false)
  const [selectId, setSelectId] = useState('')
  const [deleteId, setDeleteId] = useState('')

  const [bankData, setBankData] = useState([])
  // const [deleteVisible, setDeleteVisible] = useState(false);

  // const [hideAdd, setHideAdd] = useState(true);

  const getList = () => {
    getBankList({
      type: params?.get('type') || 1
    }).then((res) => {
      console.log(res)
      setBankData(res?.data || [])

      if (res?.data) {
        setSelectId(res?.data.find((i) => i.is_use)?.id)
      }
    })
  }

  useEffect(() => {
    getList()
  }, [])

  const handleSelectBank = (item) => {
    //
    if (isManage) {
      setDeleteId(item.id)
    } else {
      if (selectId !== item.id) {
        selectBank({
          bank_id: item.id,
          type: params?.get('type') || 1
        })
          .then((res) => {
            setSelectId(item.id)
          })
          .catch((err) => {
            Toast.show({
              content: err.message,
              position: 'bottom'
            })
          })
      }
    }
  }

  // const handleDeleteBank = () => {
  //   if (isManage) {
  //     Toast.show({
  //       content: '删除中',
  //       icon: 'loading',
  //       maskClickable: false
  //     })
  //     deleteBank({
  //       bank_id: deleteId,
  //     }).then(res => {
  //       console.log(res);
  //       Toast.clear();
  //       setDeleteVisible(false)
  //       getList()
  //     }).catch((err) => {
  //       Toast.show({
  //         content: err.message,
  //       })
  //     })
  //   }
  // }

  const toEdit = () => {
    if (+params?.get('type') === 1) {
      localStorage.setItem('bank_info', JSON.stringify(bankData[0])) // 默认只有一个
      navigate('/add_bank?edit_type=bank')
    } else {
      navigate('/add_ali')
    }
  }

  return (
    <div>
      <NavBar title={`管理${+params?.get('type') === 2 ? '支付宝' : '银行卡'}`} other={<span onClick={toEdit}>编辑</span>} />
      <div className="bank_list">
        {bankData.map((item) => (
          <div className={`bank_item ${selectId === item.id ? 'selected' : ''}`} onClick={() => handleSelectBank(item)}>
            {!isManage ? <div className="select"></div> : null}
            <div className="info">
              <div className="name">{+params?.get('type') === 2 ? item?.ali_account : `${item?.bank_name}(${item?.bank_no})`}</div>
              <div className="time">48小时内到账</div>
            </div>
            {isManage ? <div className="select"></div> : null}
          </div>
        ))}
      </div>

      <div
        className={`add_bank ${!selectId ? 'disabled' : ''}`}
        onClick={() => {
          if (selectId) {
            appSdk('backPress')
          } else {
            Toast.show({
              content: `选择你要提现的${+params?.get('type') === 2 ? '支付宝' : '银行卡'}`
            })
          }
        }}
      >
        确定
      </div>

      {/* <AmeModal
        title="是否取消绑定该银行卡"
        confirmText="同意"
        visible={deleteVisible}
        onConfirm={handleDeleteBank}
        onCancel={() => setDeleteVisible(false)}
      /> */}
    </div>
  )
}

export default BankManagement
